<template>
    <el-card shadow="always">
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="showCard">新增</el-button>
        <el-divider></el-divider>
        <el-table
            :data="menuList"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
            prop="id"
            label="id"
            width="180">
            </el-table-column>
            <el-table-column
            prop="title"
            label="菜单名称"
            width="180">
            </el-table-column>
            <!-- 使用插槽 -->
            <el-table-column
            prop="icon"
            label="图标" v-slot="props">
              <template>
                <!-- {{ props.row.icon }} -->
                <i :class="props.row.icon"></i>
              </template>
            </el-table-column>

            <el-table-column
            prop="url"
            label="地址">
            </el-table-column>

            <el-table-column
            prop="status"
            label="状态" v-slot="props">
              <template>
                  <el-button v-if="props.row.status == 1" type="success" plain size='mini'>正常</el-button>
                  <el-button v-else type="danger" plain size='mini'>禁用</el-button>
              </template>
            </el-table-column>
            
            
            <el-table-column
            label="操作" v-slot="props">
              <template>
                <el-button @click="editMenu(props.row)" type="success" icon="el-icon-edit" size='mini' circle></el-button>
                <el-button @click="delMenu(props.row.id)" type="danger" icon="el-icon-delete" size='mini' circle ></el-button>
              </template>
            </el-table-column>  
        </el-table>
        <modul ref="menuModul" :show_flag="showFlag" @updataMenu="updataMenuParent"></modul>
    </el-card>
</template>

<script>
import {mapActions,mapState} from 'vuex'
import modul from './modul'
export default {
    components:{
      modul
    },
    data() {
      return {
        menuData:[],
        showFlag: {status: false},
        editMenuData:{
          id: 0,
          pid: '',
          title: '',
          icon: '',
          type: '',
          url: "",
          type: 1,
          status: '',
        }
      }
    },
    computed: {
      // this.$store.state.menu.menuList
      ...mapState({menuList: state=>state.menu.menuList})
    },
    created(){
        this.menuListAction()      
    },    
    methods: {
      ...mapActions('menu',['menuListAction']),
      showCard(){
        this.showFlag.status = true
      },
      updataMenuParent(){
        this.menuListAction()
      },
      delMenu(id){
        this.$http.post("/menudelete",{id:id}).then(
          res=>{
            if(res.status == 200){
              this.menuListAction()
            }
          }
        )
      },
      editMenu(menu_data){
        console.log(this.$refs['menuModul'].menuForm)
        this.$refs['menuModul'].menuForm = menu_data
        // this.editMenuData = menu_data
        this.showFlag.status = true
      }
    },
  }
</script>

<style>
.el-card{
    text-align: left;
    margin: 0px;
}
</style>